import React from 'react';

const LightDiagram = ({ brightness }) => {
  let angle = 45;
  let distance = 1;
  let brightnessLevel = 80;

  if (brightness < 50) {
    angle = 30;
    distance = 0.5;
    brightnessLevel = 100;
  } else if (brightness < 100) {
    angle = 45;
    distance = 1;
    brightnessLevel = 80;
  } else if (brightness < 150) {
    angle = 60;
    distance = 1.5;
    brightnessLevel = 50;
  }

  return (
    <div style={{ marginTop: '20px' }}>
      <h3>补光示意图</h3>
      <svg width="200" height="200" viewBox="0 0 200 200">
        <circle cx="50" cy="50" r="20" fill="yellow" />
        <line x1="50" y1="50" x2="100" y2="100" stroke="black" strokeWidth="2" />
        <text x="100" y="120" fontSize="12">补光灯角度 {angle} 度</text>
        <text x="100" y="140" fontSize="12">距离 {distance} 米</text>
        <text x="100" y="160" fontSize="12">亮度 {brightnessLevel}%</text>
      </svg>
    </div>
  );
};

export default LightDiagram;